import React from "react";
import PropTypes from "prop-types";
import { Form, Radio, Input, Popover, Icon } from "antd";

import styles from "./DateCellPopover.less";

@Form.create()
class DateCellPopover extends React.Component {

  handleVisibleChange = (visible) => {
    const { form, onVisibleChange, onPropsChange } = this.props;
    if (visible === false) {
      form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          // if (values.type !== "" && values.type !== undefined) {
          // }
          onPropsChange(values);
          onVisibleChange(visible);
        } else {
          onVisibleChange(true);
        }
      });
    } else {
      onVisibleChange(visible);
    }
  };

  renderTitle = () => {
    const { title, form, onVisibleChange, onPropsChange } = this.props;
    return (
      <div className={styles.title}>
        <span>{title}</span>
        <Icon
          type="delete-o"
          className={styles.deleteBtn}
          onClick={() => {
            form.setFieldsValue({ type: "", remark: "" });
            onPropsChange({ type: "" });
            onVisibleChange(false);
          }}
        />
      </div>
    );
  };

  renderForm = () => {
    const { type = "", remark = "", form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Item>
          {getFieldDecorator("type", {
            initialValue: type,
          })(
            <Radio.Group>
              <Radio value="WORKING_DAY">工作日</Radio>
              <Radio value="OFF_DAY">休息日</Radio>
            </Radio.Group>,
          )}
        </Form.Item>
        <Form.Item label="备注">
          {getFieldDecorator("remark", {
            initialValue: remark,
            rules: [
              { max: 10, message: "请不要超过10个字符" },
            ],
          })(
            <Input placeholder="请输入" style={{ width: 148 }} />,
          )}
        </Form.Item>
      </Form>
    );
  };

  render() {
    const { children, type, remark, form, ...otherProps } = this.props;
    return (
      <Popover
        {...otherProps}
        overlayClassName={styles.calendarPop}
        title={this.renderTitle()}
        content={this.renderForm()}
        onVisibleChange={this.handleVisibleChange}
      >
        {children}
      </Popover>
    );
  }
};

DateCellPopover.propTypes = {
  /* 非受控 */
  type: PropTypes.oneOf(["WORKING_DAY", "OFF_DAY", ""]),
  /* 非受控 */
  remark: PropTypes.string,
  onSubmit: PropTypes.func,
  onVisibleChange: PropTypes.func,
  onPropsChange: PropTypes.func,
};

DateCellPopover.defaultProps = {
  type: undefined,
  remark: "",
  onSubmit: () => {

  },
  onVisibleChange: () => {

  },
  onPropsChange: () => {

  },
};

export default DateCellPopover;
